<template>
  <button class="myButton" :style="'width:'+buttonWidth+'px;height:'+(buttonWidth/3)+'px'"
          @click="jumpPage(theUrl)" :class="(isActiveId==theUrl?'isActive':'')+' '+direction">
    <span>{{aboutUsInfo.title}}</span>
  </button>
</template>

<script>
    export default {
        name: "aboutUs_button",
      data(){
          return{
            buttonWidth:0,
            imgHeight:0,
          }
      },
      props:{
        direction:String,
        aboutUsInfo:{},
      },
      computed:{
          isActiveId:{
            get(){
              return this.$store.getters.getAboutUsOrOurProductsId;
            },
            set(){}
          },
        theUrl:{
          get(){
            let url=this.aboutUsInfo.src;
            if(url==='/brand'){
             return '/brandIndex';
            }
            if(url==='/introduce'){
              return '/CompanyProfileIndex';
            }
            if(url==='/newlist'){
              return '/theNewsList';
            }
          },
          set(){}
        }
      },
      methods:{
        getScreen:function(){
          this.buttonWidth=document.body.clientWidth/3;
          this.imgHeight=this.buttonWidth/5;
        },
        jumpPage(url){
          this.$router.push(url);
          this.$emit('changeScroll');
          this.$store.dispatch('toChangeAboutUsOrOurProductsId',url);
          this.$store.dispatch('toChangeNowPage',url);
        }
      },
      mounted(){
        this.getScreen();
      }
    }
</script>

<style scoped>
  .myButton{
    background: #fef8f8;
    border:0;
    color:#000000;
    margin-bottom: 20px;
  }
  .myButton:active{
    background:#fc6775;
    color:#FFF;
  }
  .isActive{
    background:#fc6775;
    color:#FFF;
  }
  .myButton span{
    vertical-align: middle;
  }
  .left{
    left:30px;
    float: left;
    margin-left: 20px;
  }
  .right{
    float: right;
    right:30px;
    left:auto;
    margin-right: 20px;
  }
</style>
